


How to Make LINE Chat on AO3

by ran_a_dom (revabhipraya)



Series: AO3 Chat Skin Tutorial [2]
Category: No Fandom
Genre: Chatting & Messaging, Fanwork Research & Reference Guides, Gen
Language: Bahasa Indonesia
Status: Completed
Published: 2019-06-09
Updated: 2019-06-09
Packaged: 2020-04-23 11:29:24
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 2
Words: 862
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/19150123
Author URL: https://archiveofourown.org/users/revabhipraya/pseuds/ran_a_dom
Summary: A tutorial and live example to make LINE Chat using AO3 skin.





	1. Simple LINE Chat

**Summary for the Chapter:**

> A tutorial and live example to make simple LINE Chat using AO3 skin.

 

 

 

This is header  
  
This is first person's text.  
This is second person's text.

* * *

# how to code it?

Hello! Recently I've made [How to Make WhatsApp Chat on AO3](https://archiveofourown.org/works/15842043/chapters/36893073) on this account as well, so I can say that this one has no significant difference with it. The only differences are:

  1. No timestamp.
  2. It has a solid background with sky blue color (not a picture).
  3. It has white bubble for first person, and green bubble for second person.
  4. No display picture.
  5. No status.



Those differences actually make this skin a lot simpler than the WhatsApp skin.

Actually, this skin is also different from the original LINE Chat. The differences are:

  1. No display picture at all.
  2. No "read" receipt.
  3. No timestamp.



I intentionally make this skin a lot simpler than the original one.

Okay! Moving on to the skin code! First, go to your dashboard and click "Skins". Choose "My Work Skin", then "Create Work Skin". But you may add this code to other skin that you have, of course!

If you make a new work skin, then write anything you want in the "Title" box, and start your "CSS" box with the base of the phone:
    
    
    #workskin .phone {
      max-width: 300px;
      font-family: Roboto;
      display: table;
      margin: auto;
    }
    

Next, you'll have to make the base of the message body:
    
    
    #workskin .messagebody {
      background-color: #849EC0;
      display: table;
      padding-left: .5em;
      padding-right: .5em;
    }

Next, we're going to add contact name:
    
    
    #workskin .header {
      min-width: 300px;
      background-color: #464E66;
      border-bottom: 1px solid #464E66;
      color: #FFFFFF;
      font-size: 1.1em;
      padding-bottom: .5em;
      padding-top: .5em;
      margin-left: -.4em;
      margin-right: -.4em;
      margin-bottom: -2em;
      text-align: center;
      text-transform: capitalize;
      display: table;
    }

Since the text transform is set to  **capitalize** , then the contact name's first letter will be capitalized. You can erase this option if you want to.

Next, we'll add the bubble chat! First, we'll add the bubble chat for the first person point of view:
    
    
    #workskin .breply {
      float: right;
      color: #000000;
      margin: 0 0 0.5em;
      border-radius: 1.5em;
      padding: 0.5em 1em;
      background: #B2ED8B;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .breply::after {
      content: "";
      position: absolute;
      right: -0.25em;
      top: -0.75em;
      width: 1em;
      height: 1em;
      border-bottom: 0.5em solid #B2ED8B;
      border-bottom-right-radius: 0.5em 1em;
    }

Then, we'll add the bubble chat for the second person point of view:
    
    
    #workskin .text {
      float: left;
      color: #000000;
      margin: 0 0 0.5em;
      border-radius: 1.5em;
      padding: 0.5em 1em;
      background: #FFFFFF;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .text::after {
      content: "";
      position: absolute;
      left: -.25em;
      top: -.75em;
      width: 1em;
      height: 1em;
      border-bottom: 0.5em solid #FFFFFF;
      border-bottom-left-radius: 0.5em 1em;
    }

You're done with the CSS! Next, go to your "Work Text" and write in the "HTML" instead of "Rich Text". For the example above, just type it like this:
    
    
    <div class="phone">  
    <p class="messagebody">  
    <span class="header">This is header</span><br /><br />  
    <span class="breply">This is first person's text.</span><br />  
    <span class="text">This is second person's text.</span>  
    </p>  
    </div>

Aaand ... it's done!

 

 

This is header  
  
This is first person's text.  
This is second person's text.


	2. LINE Group Chat

**Summary for the Chapter:**

> A tutorial and live example to make LINE Group Chat using AO3 skin.

 

 

This is header  
  
This is first person's text.  
This is second person's name.  
This is second person's text.  
This is third person's name.  
This is third person's text.

* * *

# how to code it?

Next, after making a simple LINE Chat skin, we're going to make a group chat skin! From your previous LINE Chat skin, you just need to add these lines:
    
    
    #workskin .grouptext {
    color: #FFFFFF;
    font-size: .75em;
    padding-bottom: .5em;
    padding-top: 0;
    margin-left: 1em;
    margin-bottom: -2.5em;
    text-align: left;
    display: table;
    clear: both;
    }

After that, go to your "Work Text" and write in the "HTML" instead of "Rich Text". For the example above, just type it like this:
    
    
    <div class="phone">
    <p class="messagebody">
    <span class="header">This is header</span><br /><br />
    <span class="breply">This is first person's text.</span><br />
    <span class="grouptext">This is second person's name.</span><br />
    <span class="text">This is second person's text.</span><br />
    <span class="grouptext">This is third person's name.</span><br />
    <span class="text">This is third person's text.</span><br />
    </p>
    </div>

And ... you're finished!

 

This is header  
  
This is first person's text.  
This is second person's name.  
This is second person's text.  
This is third person's name.  
This is third person's text.

* * *

One more! In every LINE Group Chat, we have **mention** feature to "call" other group members. Here's the code:
    
    
    #workskin .mention {
      color: #5790CA;
    }

So, when you want to use this feature, you just have to type like this in your "Work Text":
    
    
    <div class="phone">
    <p class="messagebody">
    <span class="header">This is header</span><br /><br />
    <span class="breply">This is first person's text.</span><br />
    <span class="grouptext">This is second person's name.</span><br />
    <span class="text">This is second person's text.</span><br />
    <span class="grouptext">This is third person's name.</span><br />
    <span class="text">This is third person's text.</span><br />
    <span class="breply"><span class="mention">@mention</span></span><br />
    </p>
    </div>

The result will be like this:

 

This is header  
  
This is first person's text.  
This is second person's name.  
This is second person's text.  
This is third person's name.  
This is third person's text.@mention

**Notes for the Chapter:**

> Thank you for reading this tutorial and I hope you're able to use it! You can see another example of my LINE Chat Skin [here](https://archiveofourown.org/users/revabhipraya/pseuds/reva). Have fun!

**Works inspired by this one:**

  * [iMessage Skin](https://archiveofourown.org/works/22703617) by [Azdaema](https://archiveofourown.org/users/Azdaema/pseuds/Azdaema)




End file.
